<script setup lang='ts'>
      import axios from 'axios'; 
import { ref ,reactive} from 'vue';
const loginForm = reactive<{
    account: string
    password: string
}>({
    account: 'ceshi06',
    password: '123456'
})
const login = async () => {
    if(loginForm.account && loginForm.password){  //reactive的方法
//  if(account.value && password.value) {   ref的方法
//    const res = await axios.post("https://meikou-api.itheima.net/login", {
//         account: account.value,
//         password: password.value
//     })
    const res = await axios.post("https://meikou-api.itheima.net/login", loginForm)
    alert(JSON.stringify(res.data))
    

 }else {
    alert("用户名和密码不能为空")
 }
}
</script>
       
<template>
       <div class="container">
        <div class="login_form">
<input placeholder="请输入用户名" type="text">
<input placeholder="请输入密码" type="password">
<button @click="login">登录</button>
        </div>
       </div>
</template>
       
<style scoped>
       .container{
        width: "100%";
         height: 100vh;
         display: flex;
         justify-content: center;
         align-items: center;
       }
       .login_form {
        width: 400px;
        height: 300px;
        background-color: pink;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 20px ;
        box-sizing: border-box;
       }
       .login_form  input, button {
         margin: 10px 0;
         width: 100%;
         height: 40px;
         padding: 0 20px;
         box-sizing: border-box;
    
       }
</style>